<div class="po-menu-filter-container" [class.po-menu-filter-container-hidden]="enableCollapse">
  <input
    #inputFilter
    type="text"
    class="po-menu-filter"
    [class.po-menu-filter-aa]="componentsSize === 'small'"
    [placeholder]="literals.search"
    (keyup)="filterItems(inputFilter.value)"
  />

  <div
    class="po-menu-filter-search-icon-container"
    [class.po-menu-filter-search-icon-container-aa]="componentsSize === 'small'"
  >
    @if (!loading) {
      <po-icon
        p-icon="ICON_SEARCH"
        class="po-menu-filter-icon po-field-icon"
        [class.po-field-icon-aa]="componentsSize === 'small'"
      ></po-icon>
    }
    @if (loading) {
      <po-loading-icon [p-size]="componentsSize === 'small' ? 'xs' : 'sm'"></po-loading-icon>
    }
  </div>
  <div class="po-field-icon-container-right">
    <po-clean
      [p-element-ref]="inputFilterElement"
      [p-size]="componentsSize"
      (p-change-event)="filterItems(inputFilter.value)"
    ></po-clean>
  </div>
</div>
